<template>
  <div class="app-container">
    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-if="!isOut">新增</el-button>
    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleExport" >导出</el-button>
    <el-table  :data="detailList" ref="detailList">
      <el-table-column label="序号" align="center" type="index" width="50" />
      <el-table-column label="食材" align="center" prop="resourceName" min-width="150">
        <template v-slot="{row}">
          <!--          <span >{{row.editFlag}}</span>-->
          <!--          <span >{{row.realAmount}}</span>-->
          <span v-show="!row.editFlag">{{row.resourceName}}</span>
<!--          <span v-show="!scope.row.editFlag">{{scope.row.resourceName}}</span>-->
          <el-select v-show="row.editFlag" v-model="row.resourceId" placeholder="请选择食材" filterable clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in allResource" :key="index" :label="item.name"
                       :value="item.id" :disabled="item.disabled"></el-option>
          </el-select>
<!--          <el-input-number :disabled="!row.editFlag"  v-model="row.realAmount" controls-position="right" @change="realAmount=>realAmountChange(row,realAmount)" :min="0" :precision="2" style="width: 130px" ></el-input-number>-->
        </template>
      </el-table-column>
      <el-table-column label="单价" align="center" prop="price" width="90" >
        <template v-slot="{row}">
          <span>{{row.price | currency}}</span>
        </template>
      </el-table-column>
      <el-table-column label="上期库存" align="center" prop="lastAmount" width="90" />
      <el-table-column label="本期入库" align="center" prop="inAmount" width="90"/>
      <el-table-column label="本期出库" align="center" prop="outAmount" width="90"/>
      <el-table-column label="本期库存" align="center" prop="storeAmount" width="90"/>
      <el-table-column label="本期小计" align="center" prop="total" width="120">
        <template v-slot="{row}">
          <span>{{row.total | currency}}</span>
        </template>
      </el-table-column>
      <el-table-column label="盘点数"  align="center" prop="realAmount" width="150" >
        <template v-slot="{row}">
<!--          <span >{{row.editFlag}}</span>-->
<!--          <span >{{row.realAmount}}</span>-->
<!--          <span v-show="!row.editFlag">{{row.realAmount}}</span>-->
          <el-input-number :disabled="!row.editFlag"  v-model="row.realAmount" controls-position="right" @change="realAmount=>realAmountChange(row,realAmount)" :precision="2" style="width: 130px" ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="盘点小计" align="center" prop="realTotal" width="120">
        <template v-slot="{row}">
          <span>{{row.realTotal | currency}}</span>
        </template>
      </el-table-column>
      <el-table-column label="损/益数" align="center" prop="difference" width="90">
        <template v-slot="{row}">
          <span v-if="row.diffeAmount>0" >溢：{{row.diffeAmount }}</span>
          <span v-if="row.diffeAmount===0">{{row.diffeAmount }}</span>
          <span v-if="row.diffeAmount<0" style="color:#FF3B36">损：{{row.diffeAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="损/益小计" align="center" prop="difference" width="120">
        <template v-slot="{row}">
          <span v-if="row.difference>0" >溢：{{row.difference | currency}}</span>
          <span v-if="row.difference===0">{{row.difference | currency}}</span>
          <span v-if="row.difference<0" style="color:#FF3B36">损：{{row.difference | currency}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
        <template v-slot="{row,$index}">
          <!--          <el-button v-if="!isOut" size="mini" type="text" icon="el-icon-edit" @click="edit(row)">修改</el-button>-->
          <el-button size="small"
                     type="text"
                     icon="CircleCheck"
                     v-show="row.editFlag"
                     @click="submitForm(row, $index)">保存
          </el-button>
          <el-button size="small"
                     type="text"
                     icon="CircleClose"
                     v-show="row.editFlag"
                     @click="cancel(row, $index)">取消
          </el-button>
          <el-button size="small"
                     icon="Edit"
                     type="text"
                     v-show="!row.editFlag"
                     v-if="!isOut"
                     @click="edit(row, $index)"> 编辑
          </el-button>
          <el-button  v-if="!isOut" size="mini" type="text" icon="el-icon-edit" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
import { listAll, add, update, del } from "@/api/store/out/detail";
import {getAllResource} from "@/api/store/resource";
import {get as getStoreInInfo} from "@/api/store/in/in";
import {get} from "@/api/store/out/out";
import {addDetail, delDetail, listDetail, updateDetail} from "@/api/store/calculate/detail";
import {getPanInfo, updateStorePan} from "@/api/store/calculate/calculate";
export default {
  name: "StoreOutDetail",
  dicts: [],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      id: undefined,
      // 遮罩层
      loading: true,
      isIn: false,
      title: "",
      // 是否显示弹出层
      open: false,
      detailList:[],
      allResource:[],
      isOut:false,
      panData:'',
      panNum:'',
    };
  },
  created() {
    this.panNum = this.$route.query && this.$route.query.panNum;
    this.id = this.$route.query && this.$route.query.id;
    getPanInfo({id:this.id}).then(res=>{
      this.panData=res.data
      if(this.panData.approvalState!=='0'){
        this.isOut=true
      }
    })
    this.getList();
    getAllResource().then(response=>{
      this.allResource = response.rows;
    })
  },
  methods: {
    //盘点数量变化
    realAmountChange(row){
      if(row.realAmount !==row.storeAmount){
        row.realTotal=row.realAmount * (row.price || 0)
        row.diffeAmount=row.realAmount - row.storeAmount
        row.difference=row.diffeAmount* (row.price || 0)
      }
    },
    //计算盘点差异
    countDiffe(){
      // this.form.diffeList=[]
      // this.form.money=0
      // this.form.storePanDetailList.map(item=>{

      //   this.form.money+=item.realTotal
      // })
    },
    //选择食材
    resourceIdChange(row,id){
      row.unit=this.allResource.find(item=>item.id===id).unit
    },
    /** 查询列表 */
    getList() {
      listDetail({panNum: this.panNum,}).then(res => {
        this.detailList=[]
        if(res.rows){
          res.rows.map(item=>{
            item.editFlag=false
            // if(item.realAmount !==item.storeAmount){
              item.total=item.storeAmount * (item.price || 0)
              item.realTotal=item.realAmount * (item.price || 0)
              item.diffeAmount=item.realAmount - item.storeAmount
              item.difference=item.diffeAmount* (item.price || 0)
            // }
            this.detailList.push(item)
          })
        }
        // this.panData=res.data
        // this.detailList = response.data.storePanDetailList;
      });
    },
    handleExport(){
      this.download('/system/detail/export', {
        panNum:this.panNum
      }, `盘点明细-${this.panData.panTime}.xlsx`)
    },
    handleAdd(){
      var detail = {
        // area: "一区",
        // createBy: null,
        // createTime: null,
        panNum: this.panNum,
        // inAmount: 0,
        // lastAmount: 0,
        // name: null,
        // outAmount: 0,
        // panNum: "PDD2023113076615",
        // price: 1,
        // realAmount: 71,
        // remark: null,
        resourceId: '',
        // resourceName: null,
        // storeAmount: 69,
        // total: 69,
        // unit: null,
        // updateBy: null,
        // updateTime: null,
      }
      addDetail(detail).then(res => {
        this.getList();
      })
      // this.open=true
      // this.title='添加出库明细'
    },
    submitForm (row) {
      if(!row.resourceId){
        this.$message.error('请选择食材')
        return
      }
      row.price=this.allResource.find(item=>item.id===row.resourceId).avgPrice
      updateDetail(row).then(res=>{
        this.$message.success('保存成功')
        this.getList()
      })
    },
    cancel(row, index) {
      row.editFlag = false;
      this.getList();
      // this.open=false
      // this.reset()
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    edit(row,index) {
      row.editFlag = true;
      // this.$set(this.detailList, index, row);
      // this.$refs.detailList.doLayout()
      // this.form=JSON.parse(JSON.stringify(row))
      // this.open=true
      // this.title='修改出库明细'
    },
    del(row, index) {
      this.$confirm('请确实是否删除该盘点明细').then(res=>{
        delDetail(row.id).then(response => {
          this.$message.success('删除成功')
          this.getList();
        });
      })
    },
  }
};
</script>
